<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        报价单详情
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../../css/main.css" media="all">
    <script type="text/javascript" src="../../../../lib/loading/okLoading.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">

</head>
<style>
    .adt{
        background: #f1f1f1;
        width: 15%;
    }

    table{
        margin-top: 8px;
    }
    .tatype{
        margin-top: -25px;
    }
</style>

<body>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>



<div>
    <div id="app">
        <div class="layui-card-body">
            <div class="table-responsive">
                <h5><b>基本信息</b></h5>
                <table class="table table-bordered">
                    <tr>
                        <td class="adt">甲方名称</td>
                        <td>{{kfQuotationData.fistName}}</td>
                        <td class="adt">项目名称</td>
                        <td>{{kfQuotationData.projectName}}</td>
                    </tr>
                    <tr>
                        <td class="adt">乙方名称</td>
                        <td>{{kfQuotationData.secondName}}</td>
                        <td class="adt">报价人</td>
                        <td>{{kfQuotationData.quotationName}}</td>
                    </tr>
                    <tr>
                        <td class="adt">审批人员</td>
                        <td>{{kfQuotationData.approver}}</td>
                        <td class="adt">报价时间</td>
                        <td>{{kfQuotationData.submitTime}}</td>
                    </tr>
                    <tr>
                        <td class="adt">审批状态</td>
                        <td>{{kfQuotationData.type == '0' ? "未审批" : kfQuotationData.type == '1' ? "已通过" : kfQuotationData.type == '2' ? "未通过" : "无"}}</td>
                        <td class="adt">出库状态</td>
                        <td>{{kfQuotationData.partsoutType == '0' ? "未出库" : kfQuotationData.partsoutType == '1' ? "全部出库" : "无"}}</td>
                    </tr>
                    <tr>
                        <td class="adt">备注信息</td>
                        <td>{{kfQuotationData.remake}}</td>
                        <td class="adt">账单状态</td>
                        <td>{{kfQuotationData.priceType == '0' ? "未收款" : kfQuotationData.priceType == '1' ? "已收款" : "无"}}</td>
                    </tr>
                    <tr>
                </table>

                <h5><b>物料信息</b></h5><br>
                <div class="layui-card-body tatype">
                    <div class="table-responsive">
                        <table style="text-align: center" class="table table-bordered">
                            <thead>
                            <tr class="active">
                                <td>配件名称</td>
                                <td>数量</td>
                                <td>配件指导单价</td>
                                <td>配件总报价</td>
                                <td>安装指导单价</td>
                                <td>安装总报价</td>
                                <td>总报价</td>
                                <td>物料图册</td>
                            </tr>
                            </thead>

                            <tbody>
                            <tr v-for="(item,index) in kfBuyPartsList">
                                <td>{{item.partsName}}</td>
                                <td>{{item.partsCount}}</td>
                                <td>{{item.guideprice}}</td>
                                <td>{{item.allGuideprice}}</td>
                                <td>{{item.installPrice}}</td>
                                <td>{{item.installAllprice}}</td>
                                <td>{{item.allPrice}}</td>
                                <td><a class="layui-btn layui-btn-xs" href="javascript:void(0);" @click="watchImg(item.partsImg)"  lay-event="detail">查看</a></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <h5><b>采购相关信息</b></h5>
                <table class="table table-bordered">
                    <tr>
                        <td class="adt">配件总报价</td>
                        <td>{{kfQuotationData.partsAllprice}}</td>
                        <td class="adt">安装总报价</td>
                        <td>{{kfQuotationData.partsInstprice}}</td>
                    </tr>
                    <tr>
                        <td class="adt">总计</td>
                        <td>{{kfQuotationData.totalAllprice}}</td>
                        <td class="adt">收货地址</td>
                        <td>{{kfQuotationData.deliveryAddress}}</td>
                    </tr>
                    <tr>
                        <td class="adt">收件人及电话</td>
                        <td>{{kfQuotationData.recipientsPhone}}</td>
                    </tr>
                </table>

                <h5><b>审批信息</b></h5><br>
                <div class="layui-card-body tatype">
                    <div class="table-responsive">
                        <table style="text-align: center" class="table table-bordered">
                            <thead>
                            <tr class="active">
                                <td style="width: 15%">审批人</td>
                                <td style="width: 15%">审批进度</td>
                                <td style="width: 50%">审批说明</td>
                                <td style="width: 20%">审批日期</td>
                            </tr>
                            </thead>

                            <tbody>
                            <tr>
                                <td>{{kfQuotationData.approver}}</td>
                                <td>{{kfQuotationData.type == '0' ? "未审批" : kfQuotationData.type == '1' ? "已通过" : kfQuotationData.type == '2' ? "未通过" : "无"}}</td>
                                <td>{{kfQuotationData.approverRemake}}</td>
                                <td>{{kfQuotationData.approverTime}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <h5><b>若甲方需要乙方开增值税发票或者普通发票，则需甲方提供如下信息</b></h5>
                <table class="table table-bordered">
                    <tr>
                        <td class="adt">税号或者识别号</td>
                        <td>{{kfQuotationData.dutyParagraph}}</td>
                        <td class="adt">开户名称</td>
                        <td>{{kfQuotationData.accountName}}</td>
                    </tr>
                    <tr>
                        <td class="adt">地址及电话</td>
                        <td>{{kfQuotationData.addressandPhone}}</td>

                        <td class="adt">开户行及账号</td>
                        <td>{{kfQuotationData.accountNum}}</td>
                    </tr>
                </table>

            </div>
        </div>
        <br><br><br><br><br><br>


    </div>
</div>

<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../../js/pub.js"></script>
<script src="../../../../lib/layui/layui2.5.7.js" charset="utf-8"></script>
<script src="../../../../js/x-layui.js" charset="utf-8"></script>
<script src="../../../../js/vue.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>

</script>
</script>
<script>
    let recordId = getQueryVariable("id");
    var vm = new Vue({
        el: "#app",
        data: {
            recordId,
            kfQuotationData: null,
            kfBuyPartsList: null
        },
        mounted() {
            layui.use(['element', 'layer', 'form', 'laydate'], function () {
                $ = layui.jquery;//jquery
                lement = layui.element();//面包导航
                layer = layui.layer;//弹出层
                laydate = layui.laydate;//日期插件
                form = layui.form;
                okLoading.close($);

                layer.photos({
                    photos: '#layer-photos-demo'
                    ,shift: 3 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            })
            let request = {
                url: 'kf/quotation/getQuotationByid',
                data: {
                    userId: $userId,
                    id: recordId
                },
                method: "GET",
            };
            sendRequest(request, (res) => {
                this.kfQuotationData = res.data.kfQuotationData
                this.kfBuyPartsList = res.data.kfBuyPartsList
                console.log(this.kfQuotationData);
            });
        },
        methods: {
            watchImg(str){
                console.log("str:"+baseHead+str);
                const strdata = "{\"title\": \"\", \"id\": 123,\"start\": 0,\"data\": [";
                let imgdata = "";
                const arr = str.split("|");
                for(let i = 0 ; i < arr.length ; i++){
                    if(i == 0){
                        imgdata = imgdata + "{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+ arr[i] + "\",\"thumb\": \"\" }";
                    }else{
                        imgdata = imgdata + ",{\"alt\": \"图片名\",\"pid\": 666, \"src\": \"" + baseHead +'/other/viewUploadFile?id='+ arr[i] + "\",\"thumb\": \"\" }";
                    }
                }
                const jsondata = strdata + imgdata + "]}";
                const obj = JSON.parse(jsondata);
                layer.photos({
                    photos: obj
                    ,shift: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                });
            }
        }
    });

</script>

</body>

</html>
